<template>
  <div class="hot-page">
    <headBar  isBack="show">
      <div slot="xm-header-center">
        <div class="xm-header-title" >爆品馆</div>
      </div>
      <div slot="xm-header-right"></div>
    </headBar>
    <!--肉制品-->
    <div class="hot-group" v-for="item in cateList">
      <div class="flex flex-pack-justify tit bg-3">
        <span>{{item.name}}</span>
        <span class="more" @click="more(item.id)">更多</span>
      </div>
      <dl class="flex flex-pack-justify flex-wrap">
        <dd class="goods-item border-1px" v-for="item1 in item.wareList" @click="detail(item1.id)">
          <img :src="item1.imageThumb">
          <h3>{{item1.name}}</h3>
          <p class="price" v-if="isLogin">单价:  <price :priceUnit="item1.priceUnit || 0 " unitName=""></price></p>
          <p class="price" v-if="!isLogin"  @click.stop="toLogin"><strong>登录可见</strong></p>
          <p class="store flex flex-pack-justify">
            <span>库存:{{item1.numberInventory}}件</span><span>销量：{{item1.wareCount}}件</span>
          </p>
        </dd>
      </dl>
    </div>
    <!--肉制品-->
  </div>
</template>
<script>
  export default {
    props: {},
    data() {
      return {
        cateList: [],
        tagId: '',
        isLogin: !!Cookie.get('name')
      };
    },
    methods: {
      //获取爆品列表
      getHotList(){
        hotGoods({siteId: Cookie.get('siteId')}).then(data=>{
          if(data.returnCode == '000000'){
            this.cateList = data.result.categoryWareList;
            this.tagId = data.result.tagId;
          }
        })
      },
      /**
       * 查看更多
       * @param <string> 分类Id
       * */
      more(typeId){
        this.$router.push({name: 'goodsListHot', params: {tagId: this.tagId, labelName: '爆款', cateId: typeId}});
      },
      /**
       * 商品详情
       * @param <string> 商品Id
       * */
      detail(goodsId){
        this.$router.push({name: 'goodsDetail', params: {wareId: goodsId}});
      },
      // 跳转登录页面
      toLogin(){
        this.$router.push({name: 'login'});
      }
    },
    filters: {},
    created() {
      this.getHotList();
    },
    mounted(){

    },
    computed: {
    },
    components: {
    }
  };
</script>
<style lang="less">
  @import "./hot.less";
</style>
